HOW TO BUILD A RESPONSIVE NAVIGATION BAR(HTML, JS AND CSS).
category: HOW TO
Introduction
A Navigation bar in a website/webpage contains links to useful resources in that website. These links helps visitors to navigate through the website with ease.
In this, you are going to learn how to build a responsive navigation bar using HTML, CSS AND JAVASCRIPT.
HTML
The first thing we are going to do is define the markup for the our Navigation bar with HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Nav bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="nav_logo">Logo</div>
<ul class="navbar_links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Follow</a></li>
</ul>
<div class="navToggler">☰</div>
</div>
<script src="main.js"></script>
</body>
</html>
Notice the link and the script Element in the head and body of the HTML document respectively. This is to link the external css and javacript code to our HTML document.
The markup contains a container div with a class of navbar. This container is the parent of our navbar components and will be used to make these components flexible in CSS.
CSS
Next up, let us add CSS.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
display: flex;
justify-content: space-between;
padding: 10px;
}
.navbar_links{
display: flex;
gap: 15px;
list-style: none;
}
.navbar .nav_logo{
font-size: 25px;
font-weight: bold;
}
.navbar_links li a{
text-decoration: none;
font-size: 20px;
color: orange;
}
.navbar .navToggler{
font-size: 25px;
font-weight: bold;
display: none;
cursor: pointer;
}
/* responsive design */
@media (max-width: 600px){
.navbar{
flex-direction: column;
gap: 20px;
position: relative;
}
.navbar .navToggler{
display: block;
position: absolute;
top: 0;
right: 10px;
}
.navbar .navbar_links{
flex-direction: column;
display: none;
}
.navbar .navbar_links li{
margin-top: 10px;
font-size: 30px;
}
.navbar .navbar_links.active{
display: block;
}
}
Notice how the containters "navbar and navbar_links" were set to flex in our CSS code. This was done to make the contents inside of them flexible and as a result we could use flex properties such as space-between to align them.
The navigation links were made responsive with media query at a break-point of 600px.
Javascript
Let us add the functionality to display the links on smaller devices when the toggler is clicked.
const navToggler = document.querySelector('.navToggler');
const navLinks = document.querySelector('.navbar_links');
navToggler.addEventListener('click', ()=>{
navLinks.classList.toggle('active');
})
Notice how we added a click event to the toggler icon(this icon was generated using HTML symbols) to display and hide the navigation links when clicked.
